import react, { useState } from 'react';
import './index.less';
import { Menu } from 'antd';
import type { MenuProps } from 'antd';
import { Route, Routes, useNavigate } from "react-router-dom";

const MenuLayout = (props: any) => {
    const [current, setCurrent] = useState('mail');
    const navigate = useNavigate();

    const handleClick: MenuProps['onClick'] = e => {
        console.log('click ', e);
        navigate(e.key)
        setCurrent(e.key);
    };
    const items = [
        { label: 'React Hooks', key: '/react-hooks' }, // 菜单项务必填写 key
        { label: 'CSS Layout', key: '/css-layout' }, // 菜单项务必填写 key
        { label: 'Form Design', key: '/form' },
    ];
    return <div className='menu'>
        <Menu onClick={handleClick} selectedKeys={[current]} mode="horizontal" theme="dark" items={items}></Menu>
        {
            props.children
        }
    </div>
}

export default MenuLayout;